
<%@page import="dashboard.Statistics"%>
<%@ page import="dashboard.User"%>
<%@ page import="dashboard.UserRegistry"%>
<%@page import="dashboard.CourseRegistry"%>
<%@page import="dashboard.Activity"%>
<%@page import="dashboard.Milestone"%>
<%@page import="dashboard.Course"%>
<%@page import="java.util.List"%>
<%@page import="java.util.Date"%>

<head>
<link type="text/css" rel="stylesheet" href="stylesheets/main.css" />
<link href='stylesheets/jquery-ui-1.8.16.css' rel='stylesheet'
	type='text/css' />
<link href='stylesheets/Tablesorter.css' rel='stylesheet'
	type='text/css' />
<script src='Scripts/jquery-ui-1.8.16/jquery-1.6.2.min.js'
	type='text/javascript'></script>
<script src='Scripts/InputValidation.js' type='text/javascript'></script>
<script src='Scripts/jquery-ui-1.8.16/jquery-ui-1.8.16.min.js'
	type='text/javascript'></script>
<script type='text/javascript' src='Scripts/jquery.tablesorter.js'></script>
<script type='text/javascript' src='Scripts/jquery.tablesorter.min.js'></script>
<script type='text/javascript' src='Scripts/MenuLinks.js'></script>
<link href='stylesheets/menu.css' rel='stylesheet' type='text/css' />


<script>
	$(function() {
		$('input:button, a, button', '.button').button();
		$('a', '.button').click(function() {
			return false;
		});
	});
	$(function() {
		$('input:submit, a, button', '.button').button();
		$('a', '.button').click(function() {
			return false;
		});
	});
	
	function menuDis(name)
	{
		var elem = document.getElementById(name);
		elem.style.display = "none";
	}
	function menuShow(name)
	{
		var elem = document.getElementById(name);
		elem.style.display = "block";
	}
</script>
<%
	User user = new User(); 
	User currentUser = new User();
	if (session.getAttribute("user") != null) {
	user = (User) session.getAttribute("user");
	currentUser = UserRegistry.getInstance().getUserById(
			user.getId());
	}
%>

</head>
<%
	
%>

<div id="header">
	<a href="dashboard.jsp"><img src="img/DBtitle.png" alt=""></a>
</div>

<div id="menu">
	
	<%
		if (session.getAttribute("user") != null) {

	%>
	<ul id='menulinks' style="margin-right: 10px; ">

			<li style=""><a>Settings</a>

				<ul>
					<li><a href="info.jsp">More info</a></li>
					<li><a href='changesettings.jsp'> Change Settings  </a></li>
					<li><a href='Logout'>Logout </a></li>
				</ul>
			</li>
		</ul>
	
		<ul id='menulinks' >

			<li style=""><a>Extra</a>

				<ul>
					<li><a href="leaderboard.jsp"> Leaderboard </a></li>
					<li><a href="Favorites.jsp"> Favorites </a> </li>
				</ul>
			</li>
		</ul>
		<ul id='menulinks' >

			<li style=""><a>Milestones</a>

				<ul>
					<li><a href="milestone.jsp?action=add"> New Milestone </a></li>
					<li><a href="Milestones?action=view"> View Milestones </a> </li>
				</ul>
			</li>
			
			
		</ul>
		<ul id='menulinks' >

			<li ><a>Activities</a>

				<ul>
				<%
					if (currentUser.getTimerStatus() == false) {
				%>
				<li><a href="timer.jsp"> Start timer </a></li>
				<%
					} else {
				%>
				<li><a href="timer.jsp?t=stop"> Stop timer </a></li>
				<%
					}
				%>
					<li><a href='activities.jsp'> My Activities  </a></li>
					<li><a href="statistics.jsp?ref=db"> Statistics </a> </li>
				</ul>
			</li>
		</ul>	
		
	<%
		} else {
	%>
	<a href="login.jsp">Log in |</a> <a href="register.jsp"> Register </a>
	
	<%
		}
	%>
	
</div>
<%
	
	if (currentUser.getTimerStatus() == true) {
		Date now = new Date();
		long timeLapseS = (now.getTime() - currentUser.getActivities()
				.get(currentUser.getActivities().size() - 1).getStart().getTime()) / 1000;
		long timeLapseM = timeLapseS / 60;
		long hours = timeLapseM / 60;
		long minutes = timeLapseM % 60;
		long seconds = timeLapseS % 60;
%>
<div id="infobar" style=" padding-top: 10px;" >
	<div id="timer" >
	<form name="d">
		<input type="text" size="25" name="timer" disabled="disabled" style="width: 50%; font-size: 25px; text-align: center;">
			<input type="hidden" name=""><a href="timer.jsp?t=stop"><img height= "24" width="24" src="img/cross.png"></a>
	</form>
	</div>
	<div class="progressbar" style="height: 60px;">
	<img src="img/progress-pointer.png" title="You're above <%=Math.round(Statistics.getPositionOfCourseStudyTime(currentUser, currentUser.getActivities().get(currentUser.getActivities().size() - 1).getCourseId()))%>% of the total students for <%=CourseRegistry.getInstance().getCourseName(currentUser.getActivities().get(currentUser.getActivities().size() - 1).getCourseId())%>" 
	style="padding-left: <%=Statistics.getPositionOfCourseStudyTime(currentUser, currentUser.getActivities().get(currentUser.getActivities().size() - 1).getCourseId()) - 5%>%" >
	</div>
</div>
<div id="content" style="clear: both; padding-top: 20px;" >
<script>
<!--
	/*By George Chiang. (JK's ultimate JavaScript tutorial and free JavaScripts site!)
	http://www.javascriptkit.com
	Credit MUST stay intact for use*/
	var milisec = 0
	var seconds =
<%=seconds%>
	;
	var minutes =
<%=minutes%>
	;
	var hours =
<%=hours%>
	;

	
	
	document.d.timer.value = '0'

	function display() {
		if (milisec >= 9) {
			milisec = 0
			seconds += 1
		}

		if (seconds >= 60) {
			seconds = 0
			minutes += 1
		}
		if (minutes >= 60) {
			minutes = 0
			hours += 1
		} else
			milisec += 1
		document.d.timer.value = hours + "h " + minutes + " min " + seconds
				+ " sec"

		setTimeout("display()", 100)
	}
	display()
//-->
</script>

<% }%>